<template>
    <div class="rule-employee-tabs">
        <el-row class="search-group">
            <span>部门名称：<el-input size="default" style="width:180px" placeholder="请输入部门名称" clearable
                    v-model="state.queryParam.name" /></span>
            <span class="btns_group">
                <el-button type="primary" round size="small" @click="getTabsData">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button type="success" round size="small" @click="relOrgs">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    批量关联
                </el-button>
                <el-button type="danger" round size="small" @click="deleteOrgs">
                    <el-icon>
                        <ele-Delete />
                    </el-icon>
                    批量移除
                </el-button>
            </span>
        </el-row>
        <el-table border height="auto" :data="state.tableList" @selection-change="selectedChange"
            v-loading="state.Tabls.loading">
            <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
            <el-table-column label="部门编号" prop="code"></el-table-column>
            <el-table-column label="部门名称" prop="name"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" text size="small" @click="relOrg(scope.row.code)">关联</el-button>
                    <el-button type="danger" text size="small" @click="deleteOrg(scope.row.code)">移除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="onHandleSizeChange($event)" @current-change="onHandleCurrentChange($event)"
            class="mt15" :pager-count="5" :page-sizes="[10, 50, 200, 800]" v-model:current-page="state.queryParam.pageNum"
            background v-model:page-size="state.queryParam.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="state.queryParam.total">
        </el-pagination>
        <dialog-org ref="dialogRef" @refresh="getTabsData"></dialog-org>
    </div>
</template>

<script setup lang="ts" >
import { defineAsyncComponent, reactive, ref } from 'vue';
import { useAccessRuleEmployeePageApi, useAccessRuleRemoveOrgApi } from '/@/api/access/rule';
import { ElMessage, ElMessageBox } from 'element-plus';
import { usePersonOrgPageApi } from '/@/api/person/org';
import { useAttendRuleAddOrgApi, useAttendRuleRemoveOrgApi } from '/@/api/attend/rule';

const dialogOrg = defineAsyncComponent(() => import('./dialogOrg.vue'));

const dialogRef = ref()
const state = reactive({
    ruleRow: {
        code: '',
        name: ''
    },
    Tabls: {
        loading: false,
        type: 0,
        title: '',
    },
    formData: {
        code: '',
        codeList: [] as string[]
    },
    tableList: [],
    queryParam: {
        ruleCode: '',
        name: '',
        pageSize: 10,
        pageNum: 1,
        total: 0,
    }
});

// 打开弹窗
const initTabs = async (row: { code: string; name: string }) => {
    state.ruleRow = row
    state.queryParam.ruleCode = row.code
    state.formData.code = row.code
    getTabsData()
};

const getTabsData = () => {
    state.Tabls.loading = true
    usePersonOrgPageApi(state.queryParam).then(({ content }) => {
        state.tableList = content.list
        state.queryParam.pageNum = content.pageNum
        state.queryParam.pageSize = content.pageSize
        state.queryParam.total = content.total
    })
    state.Tabls.loading = false
}

// 分页改变
const onHandleSizeChange = (val: number) => {
    state.queryParam.pageSize = val;
    getTabsData()
}
const onHandleCurrentChange = (val: number) => {
    state.queryParam.pageNum = val;
    getTabsData()
}
// 选中更改
const selectedChange = (codes: any) => {
    state.formData.codeList = []
    codes.forEach((item: { code: string; }) => {
        state.formData.codeList.push(item.code)
    })
}
// 关联部门
const relOrg = (code: string) => {
    ElMessageBox.confirm(
        '是否把该部门的所有人员关联到该规则？',
        '提示',
        {
            distinguishCancelAndClose: true,
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
        }
    ).then(() => {
        useAttendRuleAddOrgApi({ codeList: [code], code: state.ruleRow.code }).then((res: any) => {
            ElMessage.success('关联成功')
            getTabsData()
        })
    })
}
//移除
const deleteOrg = (code: string) => {
    ElMessageBox.confirm(
        `是否从权限组移除选中部门`,
        '提示',
        {
            distinguishCancelAndClose: true,
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
        }
    ).then(() => {
        useAttendRuleRemoveOrgApi({ codeList: [code], code: state.ruleRow.code }).then(() => {
            ElMessage.success('移除成功')
        })
    })
}

// 批量关联部门
const relOrgs = () => {
    ElMessageBox.confirm(
        '是否进行批量关联？',
        '提示',
        {
            distinguishCancelAndClose: true,
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
        }
    ).then(() => {
        useAttendRuleAddOrgApi(Object.assign({}, state.formData, { code: state.ruleRow.code })).then((res: any) => {
            ElMessage.success('关联成功')
            getTabsData()
        })
    })
}

//批量移除
const deleteOrgs = () => {
    ElMessageBox.confirm(
        `是否从权限组移除选中部门`,
        '提示',
        {
            distinguishCancelAndClose: true,
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
        }
    ).then(() => {
        useAttendRuleRemoveOrgApi(Object.assign({}, state.formData, { code: state.ruleRow.code })).then(() => {
            ElMessage.success('移除成功')
        })
    })
}

const openDialog = () => {
    dialogRef.value.openDialog(state.ruleRow)
}

defineExpose({
    initTabs,
});
</script>


<style scoped lang="scss">
:deep(.el-dialog__header) {
    margin: 0;
    border-bottom: 1px dashed rgba(0, 0, 0, .2);
}

:deep(.el-dialog__footer) {
    border-top: 1px dashed rgba(0, 0, 0, .2);
}

.search-group {
    display: flex;
    align-items: center;
    padding-bottom: 15px;
}

.btns_group {
    margin-left: 12px;
}
</style>